<style>
.page{
	padding-bottom: 100upx;
}
.m-no-address{
	padding-left: 40upx;
	font-size: 30upx;
}
.m-address-info{
    width: 100%;
	position: relative;
	padding: 40upx 0;
	background: #ffffff;
}
.m-address-info-l{
	width: 600upx;
	margin-left: 40upx;
}
.m-address-info-r{
	position: absolute;
	right: 20upx;
	top: 50%;
	transform: translateY(-50%);
}
.m-address-info-t{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 40upx;
	margin-bottom: 18upx;
	font-size: 34upx;
}
.u-address-content{
	font-size: 30upx;
	color: #5f5f5f;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.m-address-bg{
	width: 100%;
	height: 14upx;
	background: url() repeat-x;
}
.g-order-goods{
	background: #f2f2f2;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.m-goods-box{
	height: 329upx;
	width: 100%;
	background: #fff;
	margin-top: 19upx;
}
.m-goods{
	width: 700upx;
	margin: 0 auto;
	height: 100%;
	overflow: hidden;
}
.m-goods image{
	float: left;
	width: 257upx;
	height: 257upx;
}
.m-goods-info{
	margin-top: 25upx;
}
.m-goods-detail{
	float: right;
	height: 257upx;
	width: 415upx;
	margin-top: 15upx;
}
.m-goods-name{
	font-size: 30upx;
	height: 80upx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.m-goods-attr{
	height: 48upx;
	font-size: 24upx;
	margin-top: 32upx;
}
.u-attr-title{
	color: #5f5f5f;
	float: left;
}
.u-attr-data{
	color: #939393;
	width: 320upx;
	float: left;
	text-overflow:ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.m-goods-number{
	height: 42upx;
	width: 100%;
	margin-top: 18upx;
}
.u-goods-buynum-box{
	width: 50%;
	float: left;
	font-size: 24upx;
	margin-top: 8upx;
}
.u-goods-buynum-title{
	color: #5f5f5f;
	float: left;
}
.u-goods-buynum{
	color: #8d8d8d;
}
.m-goods-buynum-edit-box{
	height: 40upx;
	width: 50%;
	float: left;
	position: relative;
	top: 8upx;
}
.u-goods-buynum-minus{
	border-top-left-radius: 5upx;
	border-bottom-left-radius: 5upx;
	background: #d2d2d2;
}
.u-goods-buynum-minus,.u-goods-buynum-add{
	float: left;
	width: 59upx;
	height: 40upx;
	text-align: center;
	line-height: 35upx;
	color: #3e3e3e;
}
.u-goods-buynum-edit{
	width: 88upx;
	text-align: center;
	float: left;
	height: 40upx;
}
.u-goods-buynum-edit input{
	height: 35upx;
	border: none;
	font-size: 30upx;
	line-height: 30upx;
	position: relative;
	top: -3upx;
}
.u-goods-buynum-add{
	background: #d71311;
	border-top-right-radius: 5upx;
	border-bottom-right-radius: 5upx;
	color: #fff;
}
.u-price-total{
	color: #d71311;
	font-size: 34upx;
	margin-top: 30upx;
	text-align: right;
}
.g-pay-info-box{
	margin-top: 20upx;
	background: #fff;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.m-pay-info-box{
	width: 698upx;
	margin: 0 auto;
	height: 100%;
}
.u-pay-title{
	font-size: 34upx;
	margin-top: 35upx;
}
.m-pay-type-box{
	width: 680upx;
	margin-left: 15upx;
}
.m-pay-type-box{
	margin-top: 32upx;
}
.m-pay-type{
	width: 682upx;
	margin: 0 auto;
	height: 75upx;
	margin-left: 21upx;
}
.m-pay-type-title{
	width: 80%;
	height: 100%;
	margin-bottom: 48upx;
	float: left;
}
.m-pay-type-title image{
	width: 75upx;
	height: 75upx;
	float: left;
}
.u-type-title{
	float: left;
	margin-left: 32upx;
	height: 75upx;
	line-height: 75upx;
}
.u-pay-icon{
	float: right;
	width: 10%;
	margin-top: 20upx;
}
.u-pay-icon image{
	width: 42upx;
	height: 42upx;
}
.g-pay{
	width: 100%;
	height: 100upx;
	line-height: 100upx;
	border-top: 2upx solid #e5e5e5;
	position: fixed;
    bottom: 0px;
	background: #fff;
}
.m-pay-price,.u-go-pay{
	width: 50%;
	float: left;
	text-align: center;
}
.u-go-pay{
	background: #d71311;
	color: #fff;
	font-size: 40upx;
}
.buyed{
	background: #999999;
}
.m-pay-price view{
	color: #d71311;
}
.u-pay-price-text{
	font-size: 30upx;
	display: inline-block;
}
.u-price{
	display: inline-block;
	font-size: 40upx;
}
.m-full-loading{
	background: rgba(255,255,255,0);
}
</style>
<template>
    <view class="page">
        <view class="g-address">
            <navigator open-type="navigate" class="m-address-info" :url="'/pages/user/settings/address/address?type=payment'+'&promotion_id='+promotion_id+'&goods_id='+goods_id+'&num='+number">
				<view v-if="isAddress" class="m-no-address">点击添加收货地址</view>
				<view v-if="!isAddress" class="m-address-info-l">
                    <view class="m-address-info-t">
                        <view class="u-address-name">{{addressData.realname}}</view>
                        <view class="u-address-mobile">{{addressData.mobile}}</view>
                    </view>
                    <view class="u-address-content">{{addressData.province_text+addressData.city_text+addressData.zone_text+addressData.address}}</view>
                </view>
                <view class="m-address-info-r">
                    <arrow size="50" color="#656565" direction="right"></arrow>
                </view>
            </navigator>
            <view class="m-address-bg"></view>
        </view>
        <view class="g-order-goods">
            <view class="m-goods-box">
                <view class="m-goods">
                    <view class="m-goods-info">
                        <image :src="thumb" mode=""></image>
                        <view class="m-goods-detail">
                            <view class="m-goods-name">{{data.goods_name}}</view>
                            <view class="m-goods-number">
                                <view class="u-goods-buynum-box">
                                    <view class="u-goods-buynum-title">数量：</view>
                                    <view class="u-goods-buynum">{{number}}</view>
                                </view>
                                <view class="m-goods-buynum-edit-box">
                                    <view class="u-goods-buynum-minus" @tap="mins" data-index="1">-</view>
                                    <view class="u-goods-buynum-edit"><input type="number" v-model="number" @change="change"
                                            disabled /></view>
                                    <view class="u-goods-buynum-add" @tap="plus" data-index="1">+</view>
                                </view>
                            </view>
                            <view class="u-price-total">金额：{{totalPrice}}</view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="g-pay-info-box">
                <view class="m-pay-info-box">
                    <view class="u-pay-title">支付方式：</view>
                </view>
                <view class="m-pay-type-box" @tap="togglePay" v-for="(item,index) in payList" :data-type="item.type"
                    :key="index">
                    <view class="m-pay-type">
                        <view class="m-pay-type-title">
                            <image :src="item.icon_text" mode=""></image>
                            <view class="u-type-title">{{item.name}}</view>
                        </view>
                        <view class="u-pay-icon">
                            <image :src="type == item.type ? '../../static/icons/pay-select-act.png' : '../../static/icons/pay-select.png'"
                                mode=""></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="g-pay">
            <view class="m-pay-price">
                <view class="u-pay-price-text">实付：¥</view>
                <view class="u-price">{{totalPrice}}</view>
            </view>
            <view class="u-go-pay" :class="[!isBuy?'':'buyed']" @tap="buy">
                确认支付
            </view>
        </view>
        
        <view class="m-full-loading" v-if="isShowLoading">
            <view class="m-loading">
                <image src="../../static/images/loading.gif" mode="widthFix"></image>
                <text>加载中</text>
            </view>
        </view>
    </view>
</template>
<script>
	import henglang from '../../common/common.js';
    export default {
        data() {
            return {
                number: 1, // 购买数量
                goods_id: '',
                promotion_id: '',
                addressId: '',
                nPrice: 30,
                type: '', // 支付类型
                nMaxNum: 15, // 最大购买份数
                data: {}, // 商品数据
                addressData: {}, // 地址
                payList: [], // 支付列表
                thumb: '',
                isShowLoading: false,
				isAddress: false,
				isBuy: false
            };
        },
		computed: {
			totalPrice() {
				return (this.data.shop_price * this.number).toFixed(2)
			}
		},
        methods: {
            mins() { // 数量减
                this.number = --this.number;
                if (this.number <= 0) {
                    this.number = 1;
                    henglang.showToast('最大购买份数1');
                }
            },
            plus() { // 数量加
                this.number = ++this.number;
                if (this.number >= this.data.sy_buy_num) {
                    this.number = this.data.sy_buy_num;
                    henglang.showToast('最大购买份数' + this.data.sy_buy_num);
                }
            },
            change() {
                if (this.number <= 0) {
                    this.number = 1;
                    henglang.showToast('最大购买份数1');
                }
                if (this.number >= this.data.sy_buy_num) {
                    this.number = this.data.sy_buy_num;
                    henglang.showToast('最大购买份数' + this.data.sy_buy_num);
                }
            },
            togglePay(e) {
                this.type = e.currentTarget.dataset.type;
            },
            buy() {
				if(!this.isBuy){
					if(!this.addressId){
						henglang.showToast('请点击上方添加收货地址');
						return false;
					}
					let that = this;
					that.isBuy = true
					this.isShowLoading = true;
					if(!uni.getStorageSync('isGoodType')){
						that.isShowLoading = false;
						henglang.showToast('支付成功！请等待客服发货',500)
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/jewel/index/index'
							})
						},500)
					}else{
						new Promise((resolve, reject) => {
							henglang.post('order/order',{promotion_id: that.promotion_id,goods_id: that.goods_id,buy_num: that.number,address_id: that.addressId},true,function(res){
								if (res.data.code <= -1) {
								    that.isShowLoading = false;
								    reject(res);
								} else {
								    resolve(res.data.data);
								}
							});
						}).then((res) => {
							henglang.post('payment/pay',{type: that.type,order_no: res.order_no},true,function(res){
								that.isShowLoading = false;
								if (res.data.code <= -1) {
								    henglang.showToast(res.data.msg);
									return false;
								} else {
								    switch (that.type) {
								        case 'wxpay':
										case 'alipay':
								            uni.requestPayment({
								                provider: that.type,
								                orderInfo: res.data.data.pay_order, //微信、支付宝订单数据,
								                success: (res) => {
								                    henglang.showToast('支付成功',500);
								                    uni.redirectTo({
								                    	url:'/pages/order/pay_after?team_id='+res.data.data.team_id
								                    })
								                },
								                fail: (res) => {
								                    henglang.showToast('支付失败');
													that.isBuy = false
								                }
								            })
								            break;
								        case 'granary':
								            if (res.data.code >= 0) {
												henglang.showToast(res.data.msg,500);
								                setTimeout(() => {
								                    uni.redirectTo({
								                        url: '/pages/order/pay_after?team_id='+res.data.data.team_id
								                    })
								                }, 500)
								            }
								            break;
								    }
								
								}
							});
						}, (res) => {
						    henglang.showToast(res.data.msg);
							that.isBuy = false
						})
					}
				}
            }
        },
        onReady() {
            let that = this;
			henglang.post('payment/payList',{},true,function(res){
				that.payList = res.data.data;
				that.type = that.payList[2].type;
			});
        },
        onLoad({
            promotion_id,
            goods_id,
            num,
            address_id
        }) {
            let that = this;
            this.promotion_id = promotion_id;
            this.number = num;
            this.goods_id = goods_id;
            // 请求地址和商品数据
            new Promise((resolve, reject) => {
                if (address_id) { // 从收货地址页传来的地址id
                    that.addressId = address_id;
					henglang.get('member/address_view',{id: address_id},true,function(res){
						that.addressData = res.data.data;
					});
                } else { // 没有地址id
					henglang.get('member/address',{},true,function(res){
						if (!res.data.data.length) {
						    that.isShowLoading = false;
							that.isAddress = true
						    return false;
						}
						that.addressData = res.data.data[0];
						that.addressId = that.addressData.id;
					});
                }
				resolve();
            }).then(() => {
				henglang.get('goods/getGoodsBaseInfo',{promotion_id: promotion_id,goods_id: goods_id},false,function(res){
					that.data = res.data.data;
					that.data.shop_price = that.data.shop_price.toFixed(2);
					that.thumb = that.data.goods_photos[0].original;
					that.isShowLoading = false;
				});
            })

        }
    }
</script>
